<template>
	<cl-page background-color="#fff">
		<view class="page-captcha">
			<cl-topbar :border="false"> </cl-topbar>

			<view class="container">
				<text class="label">输入验证码</text>
				<text class="tips">已发送至 +86 {{ form.phone }}</text>

				<view class="code">
					<cl-captcha focus v-model="form.smsCode" :length="len" :gutter="26" @done="next" />
				</view>

				<cl-button type="primary" :disabled="form.smsCode.length !== len" :loading="saving" fill :height="90"
					:font-size="30" @tap="next">
					确定
				</cl-button>

				<view class="send">
					<sms-btn size="small" :border="false" :phone="form.phone" :ref="setRefs('smsBtn')" />
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { onReady } from "@dcloudio/uni-app";
	import { reactive, ref } from "vue";
	import { useCool, useStore } from "/@/cool";
	import { useUi } from "/$/cool-ui";
	import SmsBtn from "/@/components/sms-btn.vue";

	const { service, router, refs, setRefs } = useCool();
	const { user } = useStore();
	const ui = useUi();

	// 验证码长度
	const len = 4;

	// 保存状态
	const saving = ref(false);

	// 表单
	const form = reactive({
		smsCode: "",
		phone: "",
	});

	// 下一步
	function next() {
		saving.value = true;

		service.user.login
			.phone(form)
			.then(async (res) => {
				// 设置token
				user.setToken(res);

				// 设置用户信息
				await user.get();

				// 登录跳转
				router.nextLogin();
			})
			.catch((err) => {
				ui.showTips(err.message || "登录失效，请重试~");
				saving.value = false;
				form.smsCode = "";
			});
	}

	onReady(() => {
		form.phone = router.query.phone || "";
		refs.smsBtn.startCountdown();
	});
</script>

<style lang="scss" scoped>
	.page-captcha {
		.container {
			display: flex;
			flex-direction: column;
			width: 80%;
			margin: 0 auto;
			padding-top: 140rpx;
		}

		.label {
			font-size: 52rpx;
			font-weight: 500;
			margin-bottom: 44rpx;
			font-weight: bold;
			color: #151515;
		}

		.tips {
			font-size: 28rpx;
			color: #151515;
			font-weight: 500;
		}

		.code {
			margin: 34rpx -26rpx 62rpx -26rpx;
		}

		.send {
			display: flex;
			justify-content: center;
			font-size: 24rpx;
			margin-top: 30rpx;
		}
	}
</style>